<template>
  <div class="data">
    <div class="data-left">
      <div class="table-box box">
        <a-table
          :bordered="false"
          :pagination="false"
          :data-source="mixList"
          :locale="{emptyText: '暂无数据'}"
          :rowKey="(record) => record.id">
          <a-table-column
            title="名称"
            key="index"
            data-index="name"
            width="136px"
          >
          </a-table-column>
          <a-table-column
            title="类型"
            key="index"
            data-index="type"
            width="120px"
          >
            <template #default="{text}">
              <div>{{ soilTypeDict.getValue(text) }}</div>
            </template>
          </a-table-column>
          <a-table-column
            key="xc1"
            title="操作"
            data-index="original"
            width="70px"
          >
            <template #default="{text, record}">
              <div @click="selmixplant(record)" class="font-btn" :type="text">
                选择
              </div>
            </template>
          </a-table-column>
        </a-table>
      </div>
    </div>
    <div class="data-right box">
      <div class="title filter-parent-box">
        <span>当前选择拌合站：{{queryinfo.mpName}}</span>
        <div class="filter-box" style="margin-left: 80px">
          <span>报表类型</span>
          <a-select v-model:value="queryinfo.dataType" style="width: 140px" ref="select">
            <a-select-option v-for="item in typeList" :key="item.key">
              {{ item.value }}
            </a-select-option>
          </a-select>
        </div>
        <div class="filter-box">
          <span>开始时间</span>
          <a-date-picker
            v-model:value="startTime"
            format="YYYY-MM-DD"
            style="width: 140px"
          />
        </div>
        <div class="filter-box">
          <span>结束时间</span>
          <a-date-picker
            v-model:value="endTime"
            format="YYYY-MM-DD"
            style="width: 140px"
          />
        </div>
        <div class="filter-box" style="margin-left: auto">
          <a-button
            @click="getRawInfo(queryinfo.mpId, startTime, endTime, null)"
            :disabled="queryinfo.mpId <= 0"
            type="primary"
          >
            查询
          </a-button>
        </div>
      </div>
      <div class="table-box">
        <a-table
          :bordered="false"
          :pagination="false"
          :data-source="rawInfoList"
          :locale="{emptyText: '暂无数据'}"
          :scroll="{
            x: 'max-content',
            y: setHeight('.data-right .table-box', 90) + 'px',
          }"
          @change="changeOrder"
          :rowKey="(record) => record.id">
          <a-table-column
            key="gl1"
            title="骨料仓1"
            data-index="gl1"
            width="80px">
            <template #default="{text,record}">
              {{ text.toFixed(2) }}
            </template>
          </a-table-column>
          <a-table-column
            key="gl2"
            title="骨料仓2"
            data-index="gl2"
            width="80px">
            <template #default="{text,record}">
              {{ text.toFixed(2) }}
            </template>
          </a-table-column>
          <a-table-column
            key="gl3"
            title="骨料仓3"
            data-index="gl3"
            width="80px">
            <template #default="{text,record}">
              {{ text.toFixed(2) }}
            </template>
          </a-table-column>
          <a-table-column
            key="gl4"
            title="骨料仓4"
            data-index="gl4"
            width="80px">
            <template #default="{text,record}">
              {{ text.toFixed(2) }}
            </template>
          </a-table-column>
          <a-table-column
            key="gl5"
            title="骨料仓5"
            data-index="gl5"
            width="80px">
            <template #default="{text,record}">
              {{ text.toFixed(2) }}
            </template>
          </a-table-column>
          <a-table-column
            key="gl6"
            title="骨料仓6"
            data-index="gl6"
            width="80px">
            <template #default="{text,record}">
              {{ text.toFixed(2) }}
            </template>
          </a-table-column>
          <a-table-column
            key="cement"
            title="水泥仓"
            data-index="cement"
            width="80px">
            <template #default="{text,record}">
              {{ text.toFixed(2) }}
            </template>
          </a-table-column>
          <a-table-column
            key="water"
            title="水"
            data-index="water"
            width="80px">
            <template #default="{text,record}">
              {{ text.toFixed(2) }}
            </template>
          </a-table-column>
          <a-table-column
            key="additive"
            title="外加剂"
            data-index="additive"
            width="90px">
            <template #default="{text,record}">
              {{ text.toFixed(2) }}
            </template>
          </a-table-column>
          <a-table-column
            key="flyash"
            title="粉煤灰"
            data-index="flyash"
            width="90px">
            <template #default="{text,record}">
              {{ text.toFixed(2) }}
            </template>
          </a-table-column>
          <a-table-column
            key="yield"
            title="产量(方)"
            data-index="yield"
            width="80px">
          </a-table-column>
          <a-table-column
              key="warnId"
              title="是否达标"
              data-index="warnId"
              width="90px">
            <template #default="{ text, record }">
              <div v-if="record.formalId > 0" :style="{ color: text > 0 ? 'red' : 'green' }">
                {{ text > 0 ? '未达标' : '已达标' }}
              </div>
              <div v-else>
                {{  }}
              </div>
            </template>
          </a-table-column>
          <a-table-column
            key="endTime"
            title="生产时间"
            data-index="endTime"
            sorter="true"
            :sortDirections="['descend','ascend','descend']"
            defaultSortOrder="descend"
            width="120px">
          </a-table-column>
          <a-table-column
            key="info"
            title="详细信息"
            data-index="warnId"
            width="70px">
            <template #default="{ text,record }">
              <div>
                <FileTextOutlined @click="getDetailInfo(record)" />
              </div>
            </template>
          </a-table-column>
        </a-table>
      </div>
      <div class="pagbox">
        <div v-if="queryinfo.total>0" style="padding: 0 26px;font-size:16px;text-align: right;line-height:32px;">
          当前共{{ queryinfo.total }}条数据
        </div>
        <a-pagination
          v-if="queryinfo.total != null"
          v-model:current="queryinfo.page"
          @change="getDataByPage"
          :total="queryinfo.total"
          :page-size="queryinfo.pageSize"
          show-less-items
        />
      </div>
    </div>
    <SModal
      :title="'详细信息--'+ detailInfo.pfName"
      width="1200"
      height="356"
      :isShow="showModalInfo.isShow"
      @closed="() => (showModalInfo.isShow = !showModalInfo.isShow)"
    >
      <a-table
        style="flex: 1"
        :bordered="false"
        :data-source="detailInfo.table"
        :pagination="false"
        :locale="{ emptyText: '暂无数据' }"
        :rowKey="(record) => record.index"
      >
        <a-table-column title="&nbsp;" data-index="cell0" />
        <a-table-column title="骨料1" data-index="cell1">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell1 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料2" data-index="cell2">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell2 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料3" data-index="cell3">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell3 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料4" data-index="cell4">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell4 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料5" data-index="cell5">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell5 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料6" data-index="cell6">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell6 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="水泥" data-index="cell7">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell7 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="水" data-index="cell8">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell8 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="外加剂" data-index="cell9">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell9 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="粉煤灰" data-index="cell10">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell10 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="产量" data-index="cell11" />
        <a-table-column title="拌合时间" data-index="cell12" />
      </a-table>
    </SModal>
    <SModal
        :title="'详细信息--'+ detailInfo.pfName"
        width="1200"
        height="356"
        :isShow="showModalInfo.isStableShow"
        @closed="() => (showModalInfo.isStableShow = !showModalInfo.isStableShow)"
    >
      <a-table
          style="flex: 1"
          :bordered="false"
          :data-source="detailInfo.table"
          :pagination="false"
          :locale="{ emptyText: '暂无数据' }"
          :rowKey="(record) => record.index"
      >
        <a-table-column title="&nbsp;" data-index="cell0" />
        <a-table-column title="骨料1" data-index="cell1">
          <template #default="{ text,record }">
            <div
                v-html="text"
                :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell1 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料2" data-index="cell2">
          <template #default="{ text,record }">
            <div
                v-html="text"
                :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell2 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料3" data-index="cell3">
          <template #default="{ text,record }">
            <div
                v-html="text"
                :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell3 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料4" data-index="cell4">
          <template #default="{ text,record }">
            <div
                v-html="text"
                :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell4 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料5" data-index="cell5">
          <template #default="{ text,record }">
            <div
                v-html="text"
                :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell5 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料6" data-index="cell6">
          <template #default="{ text,record }">
            <div
                v-html="text"
                :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell6 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="水泥" data-index="cell7">
          <template #default="{ text,record }">
            <div
                v-html="text"
                :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell7 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="水" data-index="cell8">
          <template #default="{ text,record }">
            <div
                v-html="text"
                :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell8 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="外加剂" data-index="cell9">
          <template #default="{ text,record }">
            <div
                v-html="text"
                :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell9 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="粉煤灰" data-index="cell10">
          <template #default="{ text,record }">
            <div
                v-html="text"
                :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell10 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)',
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="产量" data-index="cell11" />
<!--        <a-table-column title="拌合时间" data-index="cell12" />-->
      </a-table>
    </SModal>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue'
import {setHeight} from "@/utils/tableUtils"
import {data, mixplant} from '@/hooks/mix/data'
import {message} from 'ant-design-vue'
import moment from 'moment'
import {FileTextOutlined} from '@ant-design/icons-vue'
import SModal from "@/components/SModal/index.vue"
import soilTypeDict from "@/dicts/soilTypeDict";

export default defineComponent({
  setup() {
    const inType = ref(1)
    const typeList = ref([
      {
        key: 1,
        value: '生产数据',
      },
      {
        key: 2,
        value: '报警信息',
      }
    ])
    const { mixList } = mixplant()
    const {
      getRawInfo,
      getDetailInfo,
      queryinfo,
      rawInfoList,
      detailInfo,
      showModalInfo,
    } = data()

    const startTime: any = ref(undefined)
    const endTime: any = ref(undefined)

    let selmixplant = (record: any) => {
      queryinfo.value = {
        mpId: record.id,
        mpName: record.name,
        type: record.type,
        page: 1,
        pageSize: 50,
        startTime: null,
        endTime: null,
        total: null,
        dataType: 1,
        sign: null,
      }
      rawInfoList.value = new Array()
    }

    let getDataByPage = (inPage: number) => {
      if (queryinfo.value.mpId <= 0) {
        message.warn('请先选择拌合站')
      }
      queryinfo.value.page == inPage
      getRawInfo(
          queryinfo.value.mpId,
          queryinfo.value.startTime,
          queryinfo.value.endTime,
          queryinfo.value.sign,
          queryinfo.value.pageSize,
          queryinfo.value.page
      )
    }

    const changeOrder = (pagination:any, filters:any, sorter:any) => {
      if (sorter.order == "descend") {
        queryinfo.value.sign = 1;
        queryinfo.value.page = 1;
        getDataByPage(1)
      } else if (sorter.order == "ascend") {
        queryinfo.value.sign = 2;
        queryinfo.value.page = 1;
        getDataByPage(1)
      }
    }

    return {
      moment,

      showModalInfo,

      inType,
      typeList,

      mixList,
      selmixplant,

      startTime,
      endTime,
      getRawInfo,
      queryinfo,
      rawInfoList,
      detailInfo,
      getDataByPage,
      getDetailInfo,
      setHeight,
      soilTypeDict,

      changeOrder,
    }
  },
  components: {
    SModal,
    FileTextOutlined,
  },
})
</script>

<style lang="scss" scoped>
.data {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  .data-left {
    display: flex;
    flex-direction: column;
    width: 328px;
    height: 100%;
    .table-box {
      position: relative;
      flex: 1;
      width: 100%;
      //padding: 10px;
      box-sizing: border-box;
      .table-box-title {
        line-height: 20px;
        margin-bottom: 10px;
        color: #333333;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  .data-right {
    display: flex;
    flex-direction: column;
    width: 1264px;
    height: 100%;
    margin-left: 14px;
    span {
      height: 32px;
      line-height: 32px;
    }
    .filter-parent-box {
      display: flex;
      padding: 20px 28px;
      > span {
        font-size: 16px;
        font-weight: bold;
      }
    }
    .filter-box {
      display: flex;
      font-size: 14px;
      font-weight: 100;
      color: #000;
      margin-left: 30px;
    }
    .filter-box span {
      margin-right: 8px;
    }
    .info-row {
      width: 100%;
      padding-left: 30px;
    }
    .info-row:nth-of-type(n + 3) {
      padding-top: 14px;
    }
    .table-box {
      flex: 1;
      padding: 0 20px 5px;
      box-sizing: border-box;
    }
    .pagbox {
      display: flex;
      justify-content: flex-end;
      padding: 20px 30px;
    }
  }
}
.box {
  background: #fff;
  box-sizing: border-box;
  border: 1px solid #ebedf0;
}
::v-deep .ant-table-thead > tr > th,
::v-deep .ant-table-tbody > tr > td {
  text-align: center;
}
.font-btn{
  cursor: pointer;
  color: rgb(0, 141, 255);
}
</style>
